<template>
	<view>
		<view class="search-input "><label class="iconfont icon-sousuo" /><input type="text" confirm-type="search" v-model="search"
			 class="font-size24" placeholder="搜索" /></view>
		<scroll-view class="content" scroll-y @scrolltolower="scrollButtonClick" id="height" :style="'height:' + height + 'px ;'">
			<view class="jn-grid-list">
				<view class="jn-staff-list-cell">
					<uni-swipe-action>
						<uni-swipe-action-item v-for="(item,index) in staffs" :options="options" :key="index" @click="removeDetils(item,index)">
							<view class="item" @click.stop="staffflow(item)">
								<view class="jn-item-cell">
									<view class="jn-list-cell head">
										<view class="jn-item-cell-title-left">
											<view class="font-size32 color-3A3A3A">{{item.F_FullName}}/{{item.F_EnCode}}</view>
										</view>
									</view>
									<view class="jn-list-cell cell">
										<view class="jn-item-cell-left">
											<view class="color-3A3A3A">部门：</view>
											<view class="color-9A9A9A">{{item.F_DepartmentName}}</view>
										</view>
										<view class="jn-item-cell-right">
											<view class="color-3A3A3A">岗位：</view>
											<view class="color-9A9A9A">{{item.F_PositionName}}</view>
										</view>
									</view>
									<view class="jn-list-cell cell">
										<view class="jn-item-cell-left">
											<view class="color-3A3A3A">性别：</view>
											<view class="color-9A9A9A">{{item.F_Gender}}</view>
										</view>
										<view class="jn-item-cell-right">
											<view class="color-3A3A3A">联系电话：</view>
											<view class="color-9A9A9A">{{item.F_Telephone}}</view>
										</view>
									</view>
								</view>
							</view>
						</uni-swipe-action-item>
					</uni-swipe-action>
				</view>
			</view>
		</scroll-view>
		<uni-fab :pattern="pattern" :horizontal="horizontal" :vertical="vertical" :direction="direction" @creqateopen="creqateopen"></uni-fab>
	</view>
</template>

<script>
	import helper from '@/common/js/helper.js'
	import uniFab from '@/components/uni-fab/uni-fab.vue';
	import uniSwipeAction from '@/components/uni-swipe-action/uni-swipe-action.vue'
	import uniSwipeActionItem from '@/components/uni-swipe-action-item/uni-swipe-action-item.vue'
	export default {
		components: {
			uniFab,
			uniSwipeAction,
			uniSwipeActionItem
		},
		data() {
			return {
				search: '',
				rows: 10,
				page: 1,
				total: 1,
				height: 0,
				staffList: [],
				horizontal: 'right',
				vertical: 'bottom',
				direction: 'horizontal',
				pattern: {
					color: '#7A7E83',
					backgroundColor: '#fff',
					selectedColor: '#007AFF',
					buttonColor: "#007AFF"
				},
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#dd524d'
					}
				}],
			}
		},
		onLoad() {
			this.init();
		},
		computed: {
			staffs: function() {
				let search = this.search;
				let staffList = this.staffList;
				// console.log(staffList)
				if (search) {
					return staffList.filter(function(product) {
						return Object.keys(product).some(function(key) {
							return String(product[key]).toLowerCase().indexOf(search) > -1
						})
					})
				}
				return staffList
			}
		},
		mounted() {
			uni.getSystemInfo({
				success: (res) => {
					this.height = res.windowHeight;
				}
			});
		},
		onShow() {
			this.staffs.length = 0;
			this.init();
			this.$forceUpdate();
		},
		methods: {
			init() {
				helper.ajax({
					url: '/api/Extend/Employee',
					method: 'GET',
					data: {
						pageSize: this.rows, //每页行数
						currentPage: 1, //当前页
					},
					success: res => {
						this.page = 1;
						let _total = Math.ceil(res.data.data.pagination.total/res.data.data.pagination.pageSize)
						this.total = _total;
						// console.log(this.total)
						let staff = res.data.data.list;
						this.staffList=[];
						for (let i = 0; i < staff.length; i++) {
							this.staffList.push({
								'F_Id': staff[i].id,
								'F_EnCode': staff[i].enCode,
								'F_FullName': staff[i].fullName,
								'F_DepartmentName': staff[i].departmentName,
								'F_PositionName': staff[i].positionName,
								'F_Gender': staff[i].gender,
								'F_Telephone': staff[i].telephone
							})
						}
					}
				});
			},
			scrollButtonClick() {
				// console.log("scrollButtonClick")
				uni.showLoading({
					title: '加载中...',
					mask: true
				});
				if (this.total > this.page) {
					this.page += 1;
					//触发求
					helper.ajax({
						url: '/api/Extend/Employee',
						method: 'GET',
						data: {
							pageSize: this.rows, //每页行数
							currentPage: this.page, //当前页
						},
						success: res => {
							let _total = Math.ceil(res.data.data.pagination.total/res.data.data.pagination.pageSize)
							this.total = _total;
							let staff = res.data.data.list;
							for (let i = 0; i < staff.length; i++) {
								this.staffList.push({
									'F_Id': staff[i].id,
									'F_EnCode': staff[i].enCode,
									'F_FullName': staff[i].fullName,
									'F_DepartmentName': staff[i].departmentName,
									'F_PositionName': staff[i].positionName,
									'F_Gender': staff[i].gender,
									'F_Telephone': staff[i].telephone
								})
							}
						}
					});
				}
				uni.hideLoading();
			},
			staffflow(item) {
				uni.navigateTo({
					url: './form?id=' + item.F_Id
				})
			},
			removeDetils(item, index) {
				helper.ajax({
					url: '/api/Extend/Employee/' + item.F_Id,
					method: 'Delete',
					success: res => {
						this.staffList.splice(index, 1);
						helper.msg(res.data.msg, 'success');
					}
				});
			},
			creqateopen() {
				uni.navigateTo({
					url: './form'
				});
			}
		},
	}
</script>

<style lang="scss">
	page {
		background-color: #f0f2f6;
	}
	.jn-item-cell-left {
		width: 46%;
	}

	.search-input {
		background: #FFFFFF;
	}

	.item {
		border-radius: 10upx;
		width: 100%;

		.jn-item-cell {
			padding: 0;
			background-color: #FFFFFF;
			.jn-list-cell {
				padding: 0 20upx;
				margin-bottom: 10upx;

				&.cell {
					height: 48upx;

					.color-3A3A3A,
					.color-9A9A9A {
						// font-size: 24upx;
					}
				}
			}
		}

		.head {
			height: 66upx;
			border-bottom: 1upx solid #e5e5e5;
		}
	}
</style>
